<template>
  <view class="designer-detail-page">
    <!-- 设计师信息卡片 -->
    <view class="designer-card">
      <!-- 头部信息 -->
      <view class="card-header">
        <image :src="designer.avatar" class="avatar"></image>
        <view class="info-section">
          <text class="name">{{ designer.name }}</text>
          <view class="rating-section">
            <text class="rating">{{ designer.rating }}分</text>
          </view>
          <view class="tags">
            <text class="tag">{{ designer.title }}</text>
            <text class="tag">{{ designer.location }}</text>
          </view>
        </view>
      </view>

      <!-- 统计数据 -->
      <view class="stats-section">
        <view class="stat-item">
          <text class="stat-number">{{ designer.clients }}</text>
          <text class="stat-label">客户</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ designer.followers }}</text>
          <text class="stat-label">粉丝</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ designer.experience }}年</text>
          <text class="stat-label">从业年限</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ designer.favorites }}</text>
          <text class="stat-label">收藏与获赞</text>
        </view>
      </view>

      <!-- 特性标签 -->
      <view class="features-section">
        <view class="feature-tag" v-for="(feature, index) in designer.features" :key="index">
          {{ feature }}
        </view>
      </view>
    </view>

    <!-- 详细信息 -->
    <view class="details-section">
      <view class="detail-item">
        <text class="label">擅长风格</text>
        <text class="value">{{ designer.styles.join('、') }}</text>
      </view>
      <view class="detail-item">
        <text class="label">擅长类型</text>
        <text class="value">{{ designer.specialties.join('、') }}</text>
      </view>
      <view class="detail-item">
        <text class="label">设计理念</text>
        <text class="value">{{ designer.philosophy }}</text>
      </view>
      <view class="detail-item">
        <text class="label">所获荣誉</text>
        <text class="value">{{ designer.awards }}</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="follow-button" @tap="toggleFollow">
        <text class="btn-icon" v-if="isFollowing">✓</text>
        <text class="btn-text" v-if="!isFollowing">关注</text>
        <text class="btn-text" v-if="isFollowing">已关注</text>
      </button>
      <button class="scheme-button" @tap="bookDesigner(designer.id)">
        <text class="btn-text">预约</text>
      </button>
    </view>

    <!-- 内容标签页 -->
    <view class="tab-section">
      <view :class="['tab-item', activeTab === 'cases' ? 'active' : '']" @tap="switchTab('cases')">
        <text class="tab-text">作品案例</text>
      </view>
      <view :class="['tab-item', activeTab === 'reviews' ? 'active' : '']" @tap="switchTab('reviews')">
        <text class="tab-text">客户评价</text>
      </view>
    </view>

    <!-- 作品案例展示 -->
    <view class="cases-section" v-if="activeTab === 'cases'">
      <view class="case-item" v-for="(caseItem, index) in cases" :key="index">
        <image :src="caseItem.image" class="case-image" mode="aspectFill"></image>
        <text class="case-title">{{ caseItem.title }}</text>
      </view>
    </view>

    <!-- 客户评价展示 -->
    <view class="reviews-section" v-if="activeTab === 'reviews'">
      <view class="review-item" v-for="(review, index) in reviews" :key="index">
        <view class="review-header">
          <image :src="review.avatar" class="review-avatar"></image>
          <text class="review-name">{{ review.name }}</text>
        </view>
        <text class="review-content">{{ review.content }}</text>
      </view>
    </view>
  </view>


  <view class="popup-overlay" v-if="showBookingPopup" @tap="closeBookingPopup">
    <view class="popup-container" @tap.stop>
      <view class="popup-header">
        <text class="popup-title">预约设计师</text>
        <uni-icons type="close" size="20" color="#999" @tap="closeBookingPopup"></uni-icons>
      </view>

      <view class="popup-content">
        <view class="form-item">
          <text class="form-label">您的姓名 *</text>
          <input
              class="form-input"
              placeholder="请输入您的姓名"
              v-model="bookingForm.name"
          />
        </view>

        <view class="form-item">
          <text class="form-label">联系电话 *</text>
          <input
              class="form-input"
              placeholder="请输入您的手机号"
              v-model="bookingForm.phone"
              type="number"
          />
        </view>

        <view class="form-item">
          <text class="form-label">预约时间 *</text>
          <view class="date-picker" @tap="openDatePicker">
            <text v-if="bookingForm.appointmentTime" class="date-text">{{ bookingForm.appointmentTime }}</text>
            <text v-else class="placeholder">请选择预约时间</text>
            <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">备注信息</text>
          <textarea
              class="form-textarea"
              placeholder="请输入您的需求或备注信息"
              v-model="bookingForm.remark"
              maxlength="200"
          />
        </view>
      </view>

      <view class="popup-footer">
        <button class="cancel-btn" @tap="closeBookingPopup">取消</button>
        <button class="confirm-btn" @tap="submitBooking">确认预约</button>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.designer-detail-page {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
  }

  .header-actions {
    display: flex;
    gap: 20rpx;

    .action-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.designer-card {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  padding: 30rpx;
  align-items: center;
  background-color: #fff;

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .info-section {
    flex: 1;

    .name {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .rating-section {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .rating {
        font-size: 28rpx;
        color: #ff4d4f;
        font-weight: bold;
        margin-right: 10rpx;
      }

      .stars {
        display: flex;
        gap: 4rpx;

        .star {
          font-size: 24rpx;

          .filled-star {
            color: #ff4d4f;
          }

          .empty-star {
            color: #ddd;
          }
        }
      }
    }

    .tags {
      display: flex;
      gap: 10rpx;
      flex-wrap: wrap;

      .tag {
        font-size: 24rpx;
        color: #666;
        background-color: #f5f5f5;
        padding: 4rpx 12rpx;
        border-radius: 8rpx;
      }
    }
  }
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  padding: 20rpx;
  background-color: #f5f5f5;

  .stat-item {
    text-align: center;

    .stat-number {
      font-size: 32rpx;
      color: #ef0505;
      font-weight: bold;
      display: block;
      margin-bottom: 8rpx;
    }

    .stat-label {
      font-size: 24rpx;
      color: #666;
      display: block;
    }
  }
}

.features-section {
  padding: 20rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  background-color: #fff;


  .feature-tag {
    font-size: 24rpx;
    color: #666;
    background-color: #f5f5f5;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
  }
}

.details-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .detail-item {
    padding: 30rpx 20rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    flex-direction: column;

    &:last-child {
      border-bottom: none;
    }

    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
      font-weight: bold;
      position: relative;
      padding-left: 20rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 28rpx;
        background-color: #ff4d4f;
        border-radius: 4rpx;
      }
    }

    .value {
      font-size: 24rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.action-buttons {
  display: flex;
  gap: 10rpx;
  padding: 10rpx;
  background-color: #fff;

  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .follow-button {
    flex: 1;
    background-color: #fff;
    border: 1rpx solid #ddd;
    color: #333;
    border-radius: 8rpx;
    padding: 16rpx 0;
    font-size: 28rpx;
    font-weight: bold;

    .btn-icon {
      font-size: 24rpx;
      margin-right: 8rpx;
    }

    .btn-text {
      font-size: 28rpx;
    }
  }

  .scheme-button {
    flex: 1;
    background-color: #ff4d4f;
    color: #fff;
    border-radius: 8rpx;
    padding: 16rpx 0;
    font-size: 28rpx;
    font-weight: bold;

    .btn-icon {
      font-size: 24rpx;
      margin-right: 8rpx;
    }

    .btn-text {
      font-size: 28rpx;
    }
  }
}

.tab-section {
  display: flex;
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    border-bottom: 4rpx solid transparent;

    .tab-text {
      font-size: 28rpx;
      color: #999; /* 默认灰色 */
    }

    &.active {
      border-bottom-color: #ff9900;

      .tab-text {
        color: #ff9900; /* 激活状态变为橙色 */
      }
    }
  }
}

.cases-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);

  .case-item {
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .case-image {
      width: 100%;
      height: 200rpx;
      border-radius: 8rpx;
      object-fit: cover;
    }

    .case-title {
      font-size: 28rpx;
      color: #333;
      margin-top: 16rpx;
      text-align: center; /* 添加这一行实现居中 */
      display: block; /* 确保文本元素是块级元素，居中生效 */
    }
  }
}


/* 预约弹窗样式 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.popup-container {
  width: 80%;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-content {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 26rpx;
  box-sizing: border-box;
}

.date-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
}

.date-text {
  font-size: 26rpx;
  color: #333;
}

.placeholder {
  font-size: 26rpx;
  color: #999;
}

.form-textarea {
  width: 100%;
  height: 160rpx;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 26rpx;
  box-sizing: border-box;
}

.popup-footer {
  display: flex;
  padding: 20rpx;
  border-top: 1rpx solid #eee;

  .cancel-btn, .confirm-btn {
    flex: 1;
    height: 80rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cancel-btn {
    background-color: #f5f5f5;
    color: #333;
    margin-right: 20rpx;
  }

  .confirm-btn {
    background-color: #ff4d4f;
    color: #fff;
  }
}

.reviews-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .review-item {
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .review-header {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;

      .review-avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }

      .review-name {
        font-size: 28rpx;
        color: #333;
        margin-right: 16rpx;
      }

      .review-rating {
        display: flex;
        gap: 4rpx;

        .star {
          font-size: 20rpx;

          .filled-star {
            color: #ff4d4f;
          }

          .empty-star {
            color: #ddd;
          }
        }
      }
    }

    .review-content {
      font-size: 24rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}
</style>

<script>
export default {
  name: "designer_detail",
  data() {
    return {
      // 设计师信息
      designer: {
        avatar: '/static/icon/用户.png',
        name: '王杰',
        rating: 4.8,
        title: '首席设计师',
        location: '上海杨浦店',
        clients: 265,
        followers: 241,
        experience: 10,
        favorites: 195,
        features: ['充满活力', '有耐心', '团队合作', '完美主义', '踏实肯干', '细致', '追求卓越'],
        styles: ['欧式', '中式', '现代', '简约', '美式', '北欧', '日式'],
        specialties: ['硬装设计', '软装设计', '全案设计'],
        philosophy: '房子的大小不重要，重要的是里面是的人，一千个人有一千种家，每个人都是家的家，做有温度的设计。只有家是属于自己的地方，设计有归属感的家，做有温度的设计。',
        awards: '2023APDC第十四届亚太设计精英邀请赛佳作奖\n2024CDA中国建筑装饰协会住宅产业（红鼎）创新大赛优秀奖',
      },

      // 是否已关注
      isFollowing: false,
      // 当前标签页
      activeTab: 'cases',

      // 预约弹窗相关数据
      showBookingPopup: false,
      bookingForm: {
        name: '',
        phone: '',
        appointmentTime: '',
        remark: ''
      },

      // 作品案例
      cases: [
        {
          image: '/static/banner/banner1.jpeg',
          title: '现代简约风格客厅设计'
        },
        {
          image: '/static/banner/banner2.jpeg',
          title: '欧式古典风格卧室设计'
        },
        {
          image: '/static/banner/banner3.jpeg',
          title: '新中式风格餐厅设计'
        }
      ],

      // 客户评价
      reviews: [
        {
          avatar: '/static/icon/用户.png',
          name: '张先生',
          rating: 5,
          content: '王老师的设计非常专业，从方案到施工都考虑得很周到，最终效果超出预期，非常满意！'
        },
        {
          avatar: '/static/icon/用户.png',
          name: '李女士',
          rating: 5,
          content: '沟通很顺畅，设计方案修改了几次都很耐心，最后的效果很漂亮，朋友都夸我眼光好！'
        },
        {
          avatar: '/static/icon/用户.png',
          name: '王先生',
          rating: 4,
          content: '整体效果不错，细节处理得也很到位，就是工期稍微有点长，但质量确实很好。'
        }
      ]

    };
  },
  methods: {
    // 切换关注状态
    toggleFollow() {
      this.isFollowing = !this.isFollowing;
    },

    // 获取免费方案
    getScheme() {
      uni.showToast({
        title: '方案已发送至您的邮箱',
        icon: 'success'
      });
    },

    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab;
    },



    // 显示预约弹窗
    bookDesigner() {
      this.showBookingPopup = true;
      console.info("this.showBookingPopup:"+this.showBookingPopup);
    },

    // 关闭预约弹窗
    closeBookingPopup() {
      this.showBookingPopup = false;
      // 重置表单
      this.bookingForm = {
        name: '',
        phone: '',
        appointmentTime: '',
        remark: ''
      };
    },

    // 打开日期选择器
    openDatePicker() {
      uni.showActionSheet({
        itemList: ['尽快安排', '1天内', '3天内', '1周内', '自定义时间'],
        success: (res) => {
          const options = ['尽快安排', '1天内', '3天内', '1周内', '自定义时间'];
          this.bookingForm.appointmentTime = options[res.tapIndex];
        }
      });
    },

    // 提交预约
    submitBooking() {
      // 表单验证
      if (!this.bookingForm.name) {
        uni.showToast({
          title: '请输入您的姓名',
          icon: 'none'
        });
        return;
      }

      if (!this.bookingForm.phone) {
        uni.showToast({
          title: '请输入您的联系电话',
          icon: 'none'
        });
        return;
      }

      // 简单手机号验证
      if (!/^1[3-9]\d{9}$/.test(this.bookingForm.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }

      if (!this.bookingForm.appointmentTime) {
        uni.showToast({
          title: '请选择预约时间',
          icon: 'none'
        });
        return;
      }

      // 模拟提交预约
      uni.showLoading({
        title: '提交中...'
      });

      // 模拟网络请求
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '预约成功',
          icon: 'success'
        });
        this.closeBookingPopup();
      }, 1000);
    }


  }
};
</script>